<template>
    <a-layout class="right-center-container">
        <a-layout-header theme="light" class="right-center-header-container">
            <a-button @click="saveGraph">保存</a-button>
        </a-layout-header>
        <a-layout-content class="right-content-container">
            <a-dropdown :trigger="['contextmenu']">
                <div class="graph-container" ref="graphContainerRef"></div>
                <template #overlay>
                    <a-menu>
                        <a-menu-item key="1" @click="contextMenuClicked">详细信息</a-menu-item>
                    </a-menu>
                </template>
            </a-dropdown>
            <div id="er-table-minimap-container"></div>
        </a-layout-content>
    </a-layout>
</template>
<script>
import { defineComponent, } from 'vue';

import { createErGraph } from './ErGraphCreator';

export default defineComponent({
    name: "ErGraph",
    emits:['graphBlankClick','graphCellClick'],
    data: () => {
        return {
            graph: null,
            currentCell:null,
        }
    },
    methods: {
        getGraph() {
            return this.graph;
        },
        saveGraph(){
            const graphJsonData = this.getGraph().toJSON();
            console.log("graphJsonData",graphJsonData);
        },
        init() {
            this.graph = createErGraph(this.$refs.graphContainerRef);
            this.graph.on("blank:click", ({ e, x, y }) => {
                e.stopPropagation();
                this.currentCell = null;
                this.$emit('graphBlankClick');
            });
            this.graph.on("cell:contextmenu", ({ e, x, y, cell, view }) => {
                console.log("cell:contextmenu");
                e.stopPropagation();
                this.currentCell = {e,x,y,cell,view};
            });
        },
        contextMenuClicked(){
            if(this.currentCell){
                console.log('graphCellClick',this.currentCell);
                this.$emit('graphCellClick',this.currentCell);
            }
        }
    },
    mounted() {
        this.init();
    },
});
</script>
<style>
.right-content-container{
    position: relative;
    background-color: #ccc;
    margin-top: 40px;
    display: flex;
}
#er-table-minimap-container {
    width: 200px;
    height: 200px;
    background-color: transparent;
    position: absolute;
    right: 0px;
    top: 0px;
}
#er-table-minimap-container .x6-widget-minimap{
    background-color: #b0e2cf70;
    border: 1px #ccc solid;
}
</style>